<template>
  <el-dialog :title="`${isEdit ? '编辑' : '新增'}网关`" width="700px" :model-value="modelValue" @close="commEvent.onClose">
    <el-form ref="formRef" :model="formValue" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="网关编码" prop="code">
            <el-input v-model="formValue.code" :disabled="isEdit" placeholder="网关编码以GWY开头" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="网关名称" prop="name">
            <el-input v-model="formValue.name" placeholder="请输入网关名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="ip地址" prop="ipAdd">
            <el-input v-model="formValue.ipAdd" placeholder="请输入ip地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="安装位置" prop="location">
            <el-input v-model="formValue.location" placeholder="请输入安装位置" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格型号" prop="modelNumber">
            <el-input v-model="formValue.modelNumber" placeholder="请输入规格型号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产厂家" prop="manufacturer">
            <el-input v-model="formValue.manufacturer" placeholder="请输入生产厂家" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="personCharge">
            <el-input v-model="formValue.personCharge" placeholder="请输入负责人姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产日期" prop="productionDate">
            <el-date-picker
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              v-model="formValue.productionDate"
              placeholder="请选择生产日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="投运日期" prop="putrunDate">
            <el-date-picker
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              v-model="formValue.putrunDate"
              placeholder="请选择投运日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formValue.remark" type="textarea" :rows="3" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="commEvent.onClose">取消</el-button>
      <el-button type="primary" @click="commEvent.onEnter">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, nextTick, PropType, ref, watch } from "vue"
import { ElMessage, FormInstance, FormRules } from "element-plus"
import { addGateway, modifyGateway } from "@/api/modules/archive"
import { SystemSpace } from "@/api/interface/archive"

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  rows: { type: Object as PropType<SystemSpace.GatewayPage>, default: () => {} }
})
const emit = defineEmits(["update:modelValue", "refresh"])
// 参数
const formRef = ref<FormInstance>() // 表单实例
const isEdit = computed(() => Boolean(props.rows?.id)) // 是否是编辑
// 表单数据
const formValue = ref({
  name: "",
  code: "",
  ipAdd: "",
  location: "",
  modelNumber: "",
  manufacturer: "",
  productionDate: "",
  putrunDate: "",
  personCharge: "",
  remark: ""
})
//  表单校验
const rules: FormRules = {
  code: [{ required: true, message: "请输入网关编码", trigger: "blur" }]
}
// 事件集合
const commEvent = {
  // 关闭弹窗
  onClose: () => {
    emit("update:modelValue", false)
  },
  // 确定
  onEnter: () => {
    if (!formRef.value) return
    formRef.value.validate(async valid => {
      if (!valid) return
      let res: any
      const params: SystemSpace.SaveGateway = { ...formValue.value }
      if (props.rows?.id) {
        params.id = props.rows.id
        delete params.code
        res = await modifyGateway(params)
      } else {
        res = await addGateway(params)
      }
      if (res.code !== "200") return
      ElMessage.success("操作成功")
      commEvent.onClose()
      emit("refresh")
    })
  }
}
watch(
  () => props.modelValue,
  val => {
    if (val) {
      nextTick(() => {
        if (!formRef.value) return
        formRef.value.resetFields()
        formValue.value.code = ""
        if (props.rows?.id) {
          const { code, name, ipAdd, location, modelNumber, manufacturer, productionDate, putrunDate, personCharge, remark } =
            props.rows
          formValue.value = {
            code,
            name,
            ipAdd,
            location,
            modelNumber,
            manufacturer,
            productionDate,
            putrunDate,
            personCharge,
            remark
          }
        }
      })
    }
  }
)
</script>

<style lang="scss" scoped></style>
